<template>
	<view class="body">
		<view class="title">奢品经典款</view>
		<view :scroll-x="true" class="list" :enable-flex="true">
			<view class="item" v-for="(item, index) in list" :key="item.id" @click="openDetail(item)">
				<image :src="item.image" mode="aspectFill" class="cover"></image>
				<view class="name">{{item.name}}</view>
				<view class="price">￥{{item.reduce_rmb}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			openDetail(item) {
				uni.navigateTo({
					url: "/pages/goodsDetails/goodsDetails?id=" + item.id,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		margin-top: 30rpx;
		margin-bottom: 50rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}

		.list {
			height: 394rpx;
			width: 100%;
			display: flex;
			overflow-x: scroll;

			.item {
				height: 100%;
				width: 268rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				padding: 12rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.cover {
					width: 244rpx;
					height: 244rpx;
					border-radius: 10rpx;
				}

				.name {
					overflow: hidden;
					/*超出部分隐藏*/
					white-space: nowrap;
					/*不换行*/
					text-overflow: ellipsis;
					/*超出部分文字以...显示*/
				}

				.price {
					margin: 0 auto;
					font-size: 28rpx;
					background: linear-gradient(to right, #CB712B, #D6A860);
					@extend .flex-center;
					width: 208rpx;
					margin-top: 22rpx;
					color: #FFF;
					border-radius: 100rpx;
					height: 46rpx;
				}
			}
		}
	}
</style>
